<template>
  <div class="search-info">
    <div><el-input v-model="searchInfo" placeholder="请输入身份证号" clearable></el-input></div>
    <div><el-button type="primary">检索</el-button></div>
    <div><el-button type="default">重置</el-button></div>
  </div>
  <el-table border :data="tableData" style="width: 100%;">
    <el-table-column width="50">
      <template #default="scope">
        <el-checkbox v-model="scope.row.radio" @change="handleSelectionChange(scope.row)"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="sex" label="性别"></el-table-column>
    <el-table-column prop="idCard" label="身份证"></el-table-column>
  </el-table>
</template>
<script setup>
const searchInfo = ref('')
const tableData = ref([
  {
    name: "张三",
    sex: "男",
    idCard: "110100198909230912",
    radio: false,
    id: 1,
  },
  {
    name: "李四",
    sex: "男",
    idCard: "110100198909230912",
    radio: false,
    id: 2,
  },
  {
    name: "王五",
    sex: "男",
    idCard: "110100198909230912",
    radio: false,
    id: 3
  },
]);
const handleSelectionChange = (row, col, evn) => {
  tableData.value.forEach(item => {
    if (item.id != row.id) {
      item.radio = false;
    }
  });
}
</script>
<style scoped>
.search-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
</style>